import { useEffect, useState } from "react"
import { type themeType, saveTheme, ChangeTheme } from '../theme/indes.'
import { Button } from "antd"
const ChangeLuanguage = () => {
	const [istheme, setIsTheme] = useState(() => {
		// 本地获取 存储theme 的值 dark | light
		const saved = localStorage.getItem('theme')
		// 返回 true 或着 false
		return saved === 'dark' ? true : false
	})
	useEffect(() => {
		const theme: themeType = istheme ? 'dark' : 'light'
		saveTheme(theme)
		ChangeTheme(theme)
	}, [istheme])
	const clickHandle = () => {
		setIsTheme(!istheme)
	}
	return (
		<Button
			onClick={() => clickHandle()}
			style={{
				width: 40,
				height: 40,
				borderRadius: '50%',
				border: 'none',
				background: istheme ? '#000' : '#ccc',
				color: istheme ? '#fff' : '#000',
				fontSize: 18,
				cursor: 'pointer',
				display: "flex",
				justifyContent: 'center',
				alignItems: 'center'
			}}>
			{istheme ? '🌙' : '☀️'}
		</Button>
	)
}

export default ChangeLuanguage